<template>
    <div class="invoice-list">
        <van-nav-bar title="发票抬头" left-arrow @click-left="onClickLeft">
            <template #right>
                <van-icon
                    name="search"
                    size="18"
                    @click="$router.push('/invoice/search')"
                />
            </template>
        </van-nav-bar>

        <!-- 添加发票 -->
        <van-sticky>
            <van-button block @click="$router.push('/invoice/add')">
                <van-icon name="plus" /> 新增发票抬头</van-button
            >
        </van-sticky>

        <van-list
            v-model="loading"
            :finished="total <= list.length"
            @load="loadingMore"
            finished-text="我也是有底线的～"
        >
            <van-row
                class="list-item"
                type="flex"
                align="center"
                justify="space-between"
                v-for="item in list"
                :key="item.id"
            >
                <van-col>
                    <p>{{ item.name }}</p>
                    <van-row>
                        <van-tag plain type="primary" v-if="item.type === 1"
                            >企业</van-tag
                        >
                        <van-tag plain type="primary" v-if="item.type === 2"
                            >非企业性单位</van-tag
                        >
                        <van-tag plain type="primary" v-if="item.type === 3"
                            >个人</van-tag
                        >
                        <van-tag plain type="primary" v-if="item.is_mr === 1"
                            >默认</van-tag
                        >
                    </van-row>
                    <p>税号：{{ item.sn }}</p>
                </van-col>

                <div>
                    <van-button
                        type="danger"
                        size="mini"
                        @click="onDelete(item.id)"
                        >删除</van-button
                    >
                    <van-icon name="arrow" />
                </div>
            </van-row>
        </van-list>

        <!-- 加载更多 -->
        <!-- <van-button @click="loadingMore" v-if="total > list.length"
            >加载更多</van-button
        >
        <p v-else>没有更多了</p> -->
    </div>
</template>

<script>
export default {
    created() {
        this.getList();
    },
    data() {
        return {
            list: [],
            pagenum: 1,
            pagesize: 5,
            total: 0,
            loading: false,
        };
    },
    methods: {
        onClickLeft() {
            console.log("1");
        },
        onDelete(id) {
            this.$dialog
                .confirm({
                    title: "⚠️ 操作警告",
                    message: "你确定要删除这张发票吗？",
                })
                .then(async () => {
                    // on confirm
                    await this.$http.delete(`/invoices/${id}`);
                    this.getList();
                })
                .catch(() => {
                    // on cancel
                });
        },
        async getList() {
            this.loading = true;
            // const { pagenum, pagesize } = this;
            // XMLHttpRequest（ajax）同源策略：协议 http 域名 端口号
            const res = await this.$http.get("/invoices", {
                params: { pagenum: this.pagenum, pagesize: this.pagesize },
            });
            this.list.push(...res.data.data.list);
            // this.list.sort((a, b) => b.is_mr - a.is_mr);
            this.total = res.data.data.total;
            this.loading = false;
        },
        loadingMore() {
            this.pagenum++;
            this.getList();
        },
    },
};
</script>

<style lang="less" scoped>
.invoice-list {
    min-height: 100vh;
    height: 100%;
    background-color: #f3f3f3;
    color: #999;

    .list-item {
        background-color: #fff;
        padding: 10px 15px;
        margin: 10px;
        border-radius: 5px;

        .van-tag {
            margin-right: 5px;
        }
    }
}
</style>
